<template id="successfulTrade">
    <div class="succ_mm">
        <div class="successfulTrade_top">
            <h3>订单详情</h3>
            <img src="../image/blue_da.png" alt="" @click="getSuccessfulTrade">
        </div>

        <div class="mmg_g" v-for="(pack,index) in info.package">
            <div class="successfulTrade_package">
                <span class="successfulTrade_package_1">包裹{{index}}</span>
                <span class="successfulTrade_package_2"><time>发货单号:{{pack.invoice_no}}</time></span>
            </div>
            <div class="successfulTrade_details_tu_list" @click="get_li()">
                <ul class="successfulTrade_tu_list_gou">
                <li v-for="(goods,i) in info.goods" v-if="goods.pack_id == index"><img :src="goods.goods_thumb" alt=""></li>
                </ul>
                <span>共{{pack.num}}件</span>
                <img src="../image/day.jpg" alt="" class="successfulTrade_img_mmg">
            </div>
        </div>


        <p class="successfulTrade_good">订单信息</p>
        <div class="successfulTrade_idea">
            <p>订单编号:{{info.order_sn}}<span>复制</span></p>
            <p>交易流水:{{info.order_pay_sn}}</p>
            <p>创建时间:{{info.add_time}}</p>
            <p>付款时间:{{info.pay_time}}</p>
            <!--  <p v-for="(pack,i) in info.package">包裹{{i}}快递单号:{{pack.invoice_no}}</p> -->
        </div>
        <p class="successfulTrade_p"></p>
        <p class="successfulTrade_good">结算信息</p>
        <div class="successfulTrade_trade">
             <p>商品总价<span>¥{{info.goods_amount}}</span></p>
			 <p>优惠券抵扣<img src="../image/juan_1.jpg" alt=""><span>-¥{{info.bonus}} <time></time></span></p>
			
            <p>商品实付<span>¥{{info.order_amount}} <time></time></span></p>
            <p>运费<span>{{info.shipping_fee}}</span></p>
            <p>发票<span>{{info.inv_payee_tips}}</span></p>
            <p style=" border-bottom:0.1rem solid #f5f4f2;"><span>合计:¥{{info.order_amount}}</span></p>
        </div>
        <div class="fa_x">
            <span>返现</span>
            <span>＋¥{{info.money_scale}}</span>
        </div>
        <p class="p_foot">如果收到的商品出现质量、错发、漏发等问题可申请售后退款</p>
    </div>
</template>
<script>

    export default {
        name:'successfulTrade',
		data(){
            return{
                info:'',
				mode:'order_info_paid',
				order_id:this.$route.query.order_id,
			
            }
        },
		mounted:function(){
		    let h=$(window).height();
		    $('.succ_mm').height(h);

			//初始化
			this.get_order_api();
		
        },
        methods:{
            get_order_api(){
                    let info  = [];
                    info['c']    = 'Orders';
                    info['m']    = 'order_info_success';
                    info['order_id'] = this.order_id;

                    let url  = this.GLOBAL.BaseUrl+'/mobile/api/index.php';
                    let Data = this.GLOBAL.dataParam(info);

                    this.$ajax.post(url,Data).then((res) => {
                        let temp = res.data;
                        if(temp.code == 200){
                           this.info            = temp.data;  
                           //console.log( temp.data.package)
                        }else{
                           this.GLOBAL.center_error(this,temp);        
                        }  
                    })   
            },
			getItems:function(mode,order_id){
				if(!order_id || order_id == 0){
					alert('ID异常');
					window.history.go(-1);
				}

                let url  = this.GLOBAL.BaseUrl+'/mobile/api/v1/Users.php?mode='+mode+'&order_id='+order_id;
                let Data = this.GLOBAL.dataParam();
                
                this.$ajax.post(url,Data).then((res) => {
                    let temp = res.data;
                    if(temp.code == 200){
                        this.info = temp.data;
                    }else{
                        this.GLOBAL.center_error(this,temp);        
                    }  
                })  
			},
            getSuccessfulTrade:function(){
                window.history.go(-1)
            }
        }

    }
</script>
<style>

    .fa_x span:nth-of-type(1){
        float:left;
        text-indent: 0.2rem;
        color:#494848;
        font-size:0.24rem;
        line-height:0.7rem;
    }
    .fa_x span:nth-of-type(2){
        float:right;
        line-height:0.7rem;
        margin-right: 0.2rem;
        color:#fd51ba;
        font-size:0.24rem;
    }
    .fa_x{
        width:100%;
        height:0.7rem;
    }
    /*返现*/
    .successfulTrade_details_tu_list span{
        height:0.8rem;
        line-height:0.8rem;
        color:#2c2b2b;
        font-size:0.2rem;
        position:absolute;
        top:0.18rem;
        right:0.4rem;

    }
    .successfulTrade_img_mmg{
        display:block;
        width:0.21rem;
        height:0.36rem;
        position:absolute;
        top:0.4rem;
        right:0.2rem;
    }
    .successfulTrade_details_tu_list .successfulTrade_tu_list_gou{
        height:0.8rem;
        width:5.16rem;
        padding-left:0.24rem;
        display:flex;
        overflow:hidden;
    }
    .successfulTrade_details_tu_list .successfulTrade_tu_list_gou li img{
        display:block;
        height:0.7rem;
        width:0.7rem;
    }
    .successfulTrade_details_tu_list .successfulTrade_tu_list_gou li{
        width:0.8rem;
        height:0.8rem;
        list-style:none;
        margin-right:0.1em;
    }
    .successfulTrade_details_tu_list{
        width:100%;
        height:0.89rem;
      /*  border-bottom:0.01rem solid #f0f0f0;*/
        padding-top:0.2rem;
        position:relative;
    }
    /*商品列表*/
    .successfulTrade_package_2{
        /*width:2.25rem;*/
        height:0.79rem;
        line-height:0.79rem;
        text-align:center;
        color:#afafaf;
        font-size:0.22rem;
        float:right;
        margin-right:0.2rem;
    }
    .successfulTrade_package_1{
        width:1.28rem;
        height:0.79rem;
        text-align:center;
        line-height:0.79rem;
        color:#555454;
        float:left;
        font-size:0.3rem;
        font-weight:normal;
    }
    .mmg_g{
        width:100%;
        height:auto;
    }
    .successfulTrade_package{
        height:0.79rem;
        width:100%;
        border-top:0.1rem solid #f5f4f2;
        border-bottom:1px solid #f0f0f0;
        position:relative;
    }
    /*订单包裹*/
    .p_foot{
        width:100%;
        height:1rem;
        background:#f5f4f2;
        color:#a2a2a1;
        font-size:0.2rem;
        line-height:1rem;
        text-align:center;
    }
    .successfulTrade_trade p:nth-of-type(6) span{
       /* width:2.12rem;*/
        display:block;
        height:0.61rem;
        line-height:0.61rem;
        text-align:center;
        color:#fd60bd;
        font-size:0.24rem;
        float:right;
      /*  position:absolute;
        right:0;
        top:0;*/
    }
    .successfulTrade_trade p:nth-of-type(4) span{
        display:block;
      /*  width:0.9rem;*/
        height:0.61rem;
        line-height:0.61rem;
        text-align:center;
        color:#494848;
        font-size:0.24rem;
        position:absolute;
        right:0;
        top:0;
    }
    .successfulTrade_trade p:nth-of-type(5) span{
        display:block;
     /*   width:0.9rem;*/
        height:0.61rem;
        line-height:0.61rem;
        text-align:center;
        color:#494848;
        font-size:0.24rem;
        position:absolute;
        right:0;
        top:0;
    }
    .successfulTrade_trade p:nth-of-type(1) span{
        display:block;
       /* width:1.17rem;*/
        height:0.61rem;
        line-height:0.61rem;
        text-align:center;
        color:#494848;
        position:absolute;
        right:0;
        top:0;
    }
    .successfulTrade_trade p:nth-of-type(2) span time{
        color:#a8a8a8;
    }
    .successfulTrade_trade p:nth-of-type(2) span {
        display: block;
        /*width: 1.52rem;*/
        height: 0.61rem;
        color: #fc1dac;
        font-size: 0.24rem;
        line-height: 0.61rem;
      /*  text-align: center;*/
        float:right;
       /* position: absolute;
        right: 0;
        top: 0;*/
    }
    .successfulTrade_trade p:nth-of-type(3) span time{
        color:#a8a8a8;
    }
    .successfulTrade_trade p:nth-of-type(3) span{
        display:block;
      /*  width:1.25rem;*/
        height:0.61rem;
        color:#494848;
        font-size:0.24rem;
        line-height:0.61rem;
        float:right;
      /*  text-align:center;
        position:absolute;
        right:0;
        top:0;*/
    }
    .successfulTrade_trade p span{
        margin-right:0.2rem;
    }
    .successfulTrade_trade p:nth-of-type(2) img{
        display:block;
        width:0.25rem;
        height:0.23rem;
        position:absolute;
        top:0.23rem;
        left:0.25rem;
    }
    .successfulTrade_trade p:nth-of-type(2){
        text-indent: 0.5rem;
    }
    .successfulTrade_trade p{
        width:100%;
        height:0.7rem;
        line-height:0.7rem;
        color:#494848;
        font-size:0.24rem;
        border-bottom:1px solid #f0f0f0;
        text-indent: 0.25rem;
        position:relative;
    }
    .successfulTrade_trade{
        width:100%;
       height:auto;
    }
    .successfulTrade_idea p:first-of-type{
        position:relative;
    }
    .successfulTrade_idea p:first-of-type span{
        display:block;
        width:0.66rem;
        height:0.32rem;
        border:1px solid #868686;
        color:#777777;
        font-size:0.2rem;
        line-height:0.32rem;
        text-indent: 0.1rem;
        position:absolute;
        top:0.15rem;
        right:0.25rem;
        border-radius:0.2rem;
    }
    .successfulTrade_idea p{
        width:100%;
        height:0.7rem;
        color:#b4b4b4;
        font-size:0.2rem;
        line-height:0.7rem;
        text-indent: 0.25rem;
        border-bottom:1px solid #dedddc;
    }
    .successfulTrade_idea p:last-of-type{
        border:0;
    }
    .successfulTrade_idea{
        width:100%;
        height:auto;
    }
    .successfulTrade_list span{
        display:block;
        width:0.72rem;
        height:0.24rem;
        line-height:0.24rem;
        text-align:center;
        color:#000000;
        font-size:0.2rem;
        top:0.45rem;
        right:0.27rem;
        position:absolute;
    }
    .successfulTrade_list span time{
        color:#cfcecd;
    }
    .successfulTrade_list ul{
        width:5.45rem;
        height:0.75rem;
        display:flex;
        margin-left:0.1rem;
    }
    .successfulTrade_list ul li{
        height:0.75rem;
        width:0.76rem;
        margin:0 0.05rem;
		list-style: none;
    }
    .successfulTrade_list ul li img{
        height:0.75rem;
        width:0.76rem;
    }
    .successfulTrade_good{
        width:100%;
        height:0.59rem;
        border-bottom:1px solid #f0f0f0;
        border-top:0.1rem solid #f5f4f2;
        line-height:0.59rem;
        color:#757575;
        font-size:0.23rem;
        text-indent: 0.25rem;
    }
    .successfulTrade_top h3{
        width:100%;
        height:0.79rem;
        line-height:0.79rem;
        text-align:center;
        color:#77c5fd;
        font-size:0.28rem;
    }
    .successfulTrade_top img{
        display:block;
        position:absolute;
        height:0.36rem;
        width:0.36rem;
        left:0.27rem;
        top:0.25rem;
    }
    .successfulTrade_top{
        width:100%;
        height:0.79rem;
      /*  border-bottom:1px solid #cfcecd;*/
        position:relative;
    }

</style>
